<template>
  <div class="saveUpdate">
    <el-dialog title="详情" :visible.sync="showDialog" @close="$emit('update:showUpdate', 0)" :showUpdate="showUpdate"
      width="800px" :close-on-click-modal="false">
      <el-form :model="DetailInfo" ref="saveChn" label-width="120px" size="mini">
        <dialog-wrapper :MaxWidth="600" size="mini">
          <el-row>
            <el-col :span="24"><span>申诉单号：{{DetailInfo.id}}</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">充值单号：{{DetailInfo.pay_id}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">支付类型：{{pay_type[DetailInfo.pay_type]}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">姓名：{{DetailInfo.pay_name}}</el-col>
            <el-col :span="12">充值金额：{{DetailInfo.amount}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">交易时间：{{DetailInfo.pay_at}}</el-col>
            <el-col :span="12">申诉时间：{{DetailInfo.created_at}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">处理时间：{{DetailInfo.finish_at?DetailInfo.finish_at:'暂未处理'}}</el-col>
            <el-col :span="12">
              <div class="float-left">申诉状态：</div>
              <div class="float-left" v-if="status === 0?false:true">{{DetailInfo.status === 0?'未处理':'已处理'}}</div>
              <div class="float-left" v-else>
                <el-select v-model="DetailInfo.status" clearable placeholder="请选择" size="mini" style="width: 130px">
                  <el-option v-for="(val,name) of {'未处理':0,'已处理':1}" :key="val" :label="name" :value="val"></el-option>
                </el-select>
              </div></el-col>

          </el-row>
          <el-row>
            <el-col :span="24">凭证： <a v-for="(item, index) in DetailInfo.images" :href="item" :key="index" target="_blank">
              <img :src="item" style="width: 30px">
            </a></el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="3">回复：</el-col>
            <el-col :span="21">
              <div v-if="status === 0?false:true">{{DetailInfo.response}}</div>
              <div v-else>
                <el-input type="textarea" :rows="5" v-model="DetailInfo.response" placeholder="请输回复..."
                  style="width: 500px"></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="phraseList.length>0&&status === 0">
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="21">
              <el-row>
                <span  v-for="(item, index)  in phraseList" :key="index">
                  <el-button type="warning" class="but-phrase" @click="DetailInfo.response=item.context" size="small" v-if="item">
                    {{item.title}}
                  </el-button>
                </span>
              </el-row>
            </el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :span="3"> 备注：</el-col>
            <div v-if="status === 0?false:true">{{DetailInfo.remark}}</div>
            <div v-else>
              <el-input v-model="DetailInfo.remark" placeholder="请输入备注..." style="width: 500px"></el-input>
            </div>
          </el-row>
        </dialog-wrapper>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showUpdate', 0)" size="small">取 消</el-button>
        <el-button v-if="status === 0" type="primary" :loading="loading" @click="updateDetail" size="small">确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import DialogWrapper from '@/components/DialogWrapper'
import { getAppealById, updateAppealById, getPhrase } from '@/api'
import { queryFilter } from '@/utils/patch'

export default {
  components: { DialogWrapper },
  data () {
    return {
      showDialog: this.showUpdate,
      loading: false,
      DetailInfo: {},
      imageUrl: '',
      pay_type: this.$store.state.app.pay_type,
      status: false,
      phraseList: []
    }
  },
  props: {
    showUpdate: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    },
    problemsTypeList: {
      type: Array
    }
  },
  created () {
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    getPhraseList() {
      getPhrase({type_id: this.DetailInfo.type_id}).then(res => {
        //pub=公用模版list pri=个人模版list
        //2: '公用模板', 1: '个人模板',公用模版优先
        if (res.data.pub.length < 4) {
          this.phraseList = [...res.data.pub, ...res.data.pri]

        }else if(res.data.pub.length >= 4&&res.data.pri.length<4){
          this.phraseList = [ ...res.data.pri,...res.data.pub]
        }else if (res.data.pub.length >= 4) {
          res.data.pub.length = 4;
          this.phraseList = [...res.data.pub, ...res.data.pri]
        }
        if(this.phraseList.length>8){
          this.phraseList.length = 8;
        }
        console.log(this.phraseList, 'phlist')
      })
    },
    updateDetail () {
      let requstOjb = {
        status: this.DetailInfo.status,
        remark: this.DetailInfo.remark,
        response: this.DetailInfo.response
      }
      let queryObj = queryFilter(requstOjb)
      updateAppealById(this.id, queryObj).then(res => {
        if (res.status === 0) {
          this.$message({ type: 'success', message: '编辑成功' })
          this.$emit('update:showUpdate', false)
        }
      })
    },
    getDetail () {
      getAppealById(this.id).then(res => {
        console.log(res)
        if (res.status === 0) {
          this.DetailInfo = res.data
          this.status = this.DetailInfo.status
          this.getPhraseList()
        }
      })
    },
  }
  ,
  watch: {
    showUpdate () {
      this.showDialog = this.showUpdate
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-row {
  margin-top: 5px;
}
</style>
